<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加会员' : '修改会员'" :visible.sync="visible" width="800px">
            <el-form :model="form" label-width="130px">
                <el-form-item label="会员名称">
                    <el-input placeholder="请输入会员名称" style="width: 500px" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="产品ID">
                    <el-input placeholder="请输入产品ID" style="width: 500px" v-model="form.ios_product"></el-input>
                </el-form-item>

                <el-form-item label="会员价格">
                    <el-input placeholder="请输入会员价格" style="width: 500px" v-model="form.price"></el-input>
                </el-form-item>

                <el-form-item label="会员月份时长">
                    <el-input placeholder="请输入会员月份时长" style="width: 500px" v-model="form.month"></el-input>
                </el-form-item>

                <el-form-item label="短视频收益比例">
                    <el-input placeholder="请输入短视频收益比例" style="width: 500px" v-model="form.short_rate"></el-input>
                </el-form-item>

                <el-form-item label="长视频收益比例">
                    <el-input placeholder="请输入长视频收益比例" style="width: 500px" v-model="form.long_rate"></el-input>
                </el-form-item>

                <el-form-item label="打赏收益比例">
                    <el-input placeholder="请输入打赏收益比例" style="width: 500px" v-model="form.tipping_rate"></el-input>
                </el-form-item>

                <el-form-item label="动态收益比例">
                    <el-input placeholder="请输入动态收益比例" style="width: 500px" v-model="form.infomation_rate"></el-input>
                </el-form-item>

                <el-form-item label="缩略图">
                    <medium v-model="form.thumbnail"></medium>
                </el-form-item>

                <el-form-item label="大图">
                    <medium v-model="form.image"></medium>
                </el-form-item>

                <div>
                    <el-form-item label="权益">
                        <div class="flex align-center" style="width: 500px;">
                            <div class="width-12b">权益图标</div>
                            <div class="width-30b">权益名字</div>
                            <div class="width-47b">权益说明</div>
                            <div class="width-11b">操作</div>
                        </div>
                        <div :key="index" class="flex align-flex-start mt-4" style="width: 500px;" v-for="(item, index) in form.equity">
                            <div class="width-12b">
                                <medium size="50" v-model="item.icon"></medium>
                            </div>
                            <div class="width-30b">
                                <el-input placeholder="请输入权益名字" style="width: 140px" v-model="item.name"></el-input>
                            </div>

                            <div class="width-47b">
                                <el-input placeholder="请输入权益说明" style="width: 220px" v-model="item.desc"></el-input>
                            </div>
                            <div class="width-11b">
                                <i @click="delEquity(index)" class="el-icon-minus cursor-pointer font-20" v-if="form.equity.length > 1"></i>
                                <i @click="addEquity" class="el-icon-plus cursor-pointer font-20" v-if="form.equity.length-1 == index"></i>
                            </div>
                        </div>
                    </el-form-item>
                </div>

            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary"  :loading="submitComplete">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="toForm()" size="small" style="width: 150px" type="success"   v-permission="['ADMIN','VIP_ADD']">添加</el-button>
        <el-button @click="getMemberList()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="tableData" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="产品ID" prop="ios_product"></el-table-column>
                <el-table-column label="会员名称" prop="name"></el-table-column>
                <el-table-column label="会员价格" prop="price"></el-table-column>
                <el-table-column label="会员月份时长" prop="month"></el-table-column>
                <el-table-column label="会员轮播图" prop="thumbnail">
                    <template slot-scope="scope">
                        <!-- <el-tag  :type="scope.row.disable == 1? 'success':'info'">{{ scope.row.disable == 1? '正常':'禁用' }}</el-tag> -->
                        <!-- <el-avatar :src="scope.row.thumbnail" shape="square"></el-avatar> -->
                        <el-image class="border" fit="contain" style="width: 50px; height: 50px" :src="scope.row.thumbnail" :preview-src-list="toArray(scope.row.thumbnail)">
                          </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="短视频收益比例" prop="short_rate">
                    <template slot-scope="scope">
                    <div>{{scope.row.short_rate}} %</div>
                    </template>
                </el-table-column>
                <el-table-column label="长视频收益比例" prop="long_rate">
                    <template slot-scope="scope">
                    <div>{{scope.row.long_rate}} %</div>
                    </template>
                </el-table-column>
                <el-table-column label="打赏收益比例" prop="tipping_rate">
                    <template slot-scope="scope">
                    <div>{{scope.row.tipping_rate}} %</div>
                    </template>
                </el-table-column>
                <el-table-column label="动态收益比例" prop="infomation_rate">
                    <template slot-scope="scope">
                    <div>{{scope.row.infomation_rate}} %</div>
                    </template>
                </el-table-column>
                <el-table-column label="权益说明" prop="equity">
                    <template slot-scope="scope">
                        <el-tag @click="equityShowFun(scope.row.equity)" style="cursor: pointer;" type="success">查看</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" style="padding: 10px" type="primary"   v-permission="['ADMIN','VIP_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" style="padding: 10px" type="danger"   v-permission="['ADMIN','VIP_DELETE']">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 展示权益说明 -->
        <el-dialog :visible.sync="equityShow" title="权益说明">
            <el-table :data="equity" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="图标" prop="icon">
                    <template slot-scope="scope">
                        <iconfont :icon="scope.row.icon" size="26"></iconfont>
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="desc"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
      
<script>
import SelectIcon from '@/components/SelectIcon/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"vip-list",
    mixins: [initData],
    components: {
        SelectIcon,
        medium,
    },
    data() {
        return {
            submitComplete:false,
            form: {
                name: '',
                price: '',
                month: '',
                short_rate: '',
                long_rate: '',
                tipping_rate: '',
                infomation_rate: '',
                thumbnail: '',
                equity: [],
                image: '',
                ios_product:''
            },
            visible: false,
            loading: false,
            disable: true,
            equityShow: false,
            page: 1,
            tableData: [],
            type: 'create',
            worksId: '',
            cate_idList: [],
            equity: [], //查看
  
        }
    },
    mounted() {
        this.getMemberList()
    },
    methods: {
        toArray(str){
            const arr = []
            arr.push(str)
           return arr
        },
        delEquity(index) {
            this.form.equity.splice(index, 1)
        },
        addEquity() {
            this.form.equity.push({ name: '', icon: '', desc: '' })
        },
        eventFun(item, event) {
            item.icon = event
        },
        equityShowFun(item) {
            this.equityShow = true
            this.equity = item
        },
        getMemberList() {
            this.loading = true
            let that = this
            this.$request.get('/vip/index').then((res) => {
                console.log('getAdministratorsInfo', res)
                this.loading = false
                that.tableData = res
            }).catch((error) => {
                this.loading = false
            });
        },

        equityIcon(item, event) {
            item.icon = event
        },

        imageFun(val) {
            this.form.image = val
        },

        //获取cate_id
        getCate_id() {
            this.$request.get('/swipper-cate/index').then((res) => {
                this.cate_idList = res.items
                console.log('cate_idList', res)
            })
        },

        del(id) {
            this.$request.del('/vip/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getMemberList() //重新请求数据
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            this.getCate_id()
            if (form != null) {
                this.type = 'update'
                this.worksId = form.id
                //this.form = form
                this.form.name = form.name
                this.form.price = form.price
                this.form.month = form.month
                this.form.short_rate = form.short_rate
                this.form.long_rate = form.long_rate
                this.form.tipping_rate = form.tipping_rate
                this.form.infomation_rate = form.infomation_rate
                this.form.thumbnail = form.thumbnail
                this.form.image = form.image
                this.form.ios_product = form.ios_product
                this.form.equity = form.equity //权益说明

           
       
            } else {
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    name: '',
                    price: '',
                    month: '',
                    short_rate: '',
                    long_rate: '',
                    tipping_rate: '',
                    infomation_rate: '',
                    thumbnail: '',
                    image: '',
                    ios_product:'',
                    equity: [
                        {
                            name: '',
                            icon: '',
                            desc: '',
                        },
                    ],
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                name: '',
                price: '',
                month: '',
                short_rate: '',
                long_rate: '',
                tipping_rate: '',
                infomation_rate: '',
                thumbnail: '',
                image: '',
                ios_product:'',
                equity: [
                    {
                        name: 'sds',
                        icon: 'dasd',
                        desc: 'asdsa',
                    },
                ],
            }
        },

        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            console.log('this.form',this.form)
            if (!(this.form.name && this.form.price && this.form.thumbnail && this.form.short_rate && this.form.long_rate && this.form.tipping_rate && this.form.infomation_rate && this.form.equity && this.form.image)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning',
                })
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/vip/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                    this.getMemberList() //重新请求数据
                    this.closeBox()
                  
                }).catch((error)=>{
                this.submitComplete = false
                });

            } else {
                this.$request.put('/vip/update/' + this.worksId, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                    this.getMemberList() //重新请求数据
                    this.closeBox()
                 
                }).catch((error)=>{
                this.submitComplete = false
                });

            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>